<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>发放表</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <style media="screen">
      .mui-table-view-chevron .mui-table-view-cell{
        padding-right: 45px
      }
    </style>
</head>

<body>
  <ul class="mui-table-view mui-table-view-chevron type_list_spair">
    <li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('beginTime')">
      <div class="mui-table mui-navigate-right">
        <div class="mui-table-cell mui-col-xs-4">
          <h5 class="mui-ellipsis">报告开始时间：</h5>
        </div>
        <div class="mui-table-cell mui-col-xs-8 mui-text-right">
          <span class="mui-h5" id="startDate">请选择</span>
        </div>
      </div>
    </li>
    <li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('endTime')">
      <div class="mui-table mui-navigate-right">
        <div class="mui-table-cell mui-col-xs-4">
          <h5 class="mui-ellipsis">报告结束时间：</h5>
        </div>
        <div class="mui-table-cell mui-col-xs-8 mui-text-right">
          <span class="mui-h5" id="endDate">请选择</span>
        </div>
      </div>
    </li>
    <li class="mui-table-view-cell" style="padding-right:25px;">
      <button id="btnSearch" tapmode="" onclick="searchResult();" style="float:right">
        统&nbsp;&nbsp;计
      </button>
    </li>
  </ul>
  <div id="container" style="height:360px;margin-top:10px;"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script type="text/javascript" src="../script/highcharts-3d.js"></script>
<script src="../script/mui.picker.min.js"></script>
<script type="text/template" id="itemslist">
  {{each datas as item i}}
    <option value="{{item.value}}">{{item.name}}</option>
  {{/each}}
</script>
<script type="text/javascript">
    var beginTime = '', endTime = '';
    apiready = function() {
      endTime =new Date().Format("yyyy-MM-dd 23:59:59");
      $api.html($api.byId('endDate'), endTime);

      var today=new Date();
      var t=today.getTime()-30*1000*60*60*24;
      var monthAgo=new Date(t);

      beginTime = monthAgo.Format("yyyy-MM-dd 00:00:00");
      $api.html($api.byId('startDate'), beginTime);

      searchResult()
    }

    function searchResult(){
      ajaxrd("queryItemMoneyList", {
        startDate: beginTime,
        endDate: endTime
      }, function(ret, err) {
        var useMoneyObj = {
          name: '使用金额',
          data: []
        }
        var inMoneyObj = {
          name: '入库金额',
          data: []
        }
        var categoriesArr = []
        ret.forEach(function(item, index){
          useMoneyObj.data.push(item.useMoney)
          inMoneyObj.data.push(item.inMoney)
          categoriesArr.push(item.storeloc)
        })
        var chart = Highcharts.chart('container',{
          chart: {
              type: 'column',
              options3d: {
             enabled: true,
             alpha: 15,
             beta: 15,
             depth: 110
          }
          },
          colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
         '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
          title: {
              text: '发放表'
          },
          xAxis: {
              categories: categoriesArr,
              crosshair: true
          },
          yAxis: {
              min: 0,
              title: {
                  // text: '降雨量 (mm)'
                  text: ''
              }
          },
          tooltip: {
              // head + 每个 point + footer 拼接成完整的 table
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  borderWidth: 0
              }
          },
          series: [useMoneyObj,inMoneyObj]
        });
      })
    }

    function chooseTime(type) {
      selectCommonYMD(function(data) {
        if (type == 'beginTime') {
          $api.html($api.byId('startDate'), data + ' 00:00:00');
          beginTime = data + ' 00:00:00';
        } else {
          $api.html($api.byId('endDate'), data + ' 23:59:59');
          endTime = data + ' 23:59:59';
        }
      })
    }
</script>
</html>
